<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue监视数据变化的原理-对象</title>
</head>
<body>
  <div id="root">
         <button @click="add">添加属性</button>
      <br>

      {{user.name}}   ----    {{user.age}}


  </div>


<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script>
Vue.config.productionTip = false
/*
 定义在data内部的数据之所以可以发生变化可以触发页面的重新渲染是因为Vue内部在管理这些属性的时候为他们添加了
* set和get方法，当页面上访问属性的时候实际上Vue对象使用get()数据代理访问定义在data中的属性，当我们修改了data中的属性
* 会触发set方法进行去修改data内部的属性并且调用重新渲染网页的方法

 只有在创建Vue对象传入的data内部的属性才能被set方法直接管理，后面往Vue的data中动态添加的属性不行

*
* */

    const vm = new Vue({
        el:'#root',
        data:{
            user:{
                name: "Alice"
            }
        },

        methods:{
            add(){
                // this.user.age = '12'
                this.$set(this.user,'age',22)
            }
        },





    });


</script>
</body>
</html>